<template>
	<div class="info">
		<van-nav-bar title='商品详情' left-text="" left-arrow  @click-left='backfn'>
			<template #right>
				<van-icon name="ellipsis" size="18" />
			</template>
		</van-nav-bar>
		<img :src="infoData.goodsCoverImg" alt="" class="bigimg">
		<h4>{{infoData.goodsName}}</h4>
		<p>{{infoData.goodsIntro}}</p>
		<p>原始价格{{infoData.originalPrice}};现价{{infoData.sellingPrice}}</p>
		<div v-html="infoData.goodsDetailContent" class="content"></div>
		
		<van-goods-action>
		  <van-goods-action-icon icon="chat-o" text="客服" />
		  <van-goods-action-icon icon="cart-o" text="购物车" :badge="goodsCount" @click="$router.push('/cart')"/>
		  <van-goods-action-button type="warning" text="加入购物车"  @click="onClickButton" />
		  <van-goods-action-button type="danger" text="立即购买" />
		</van-goods-action>
	</div>
</template>


<script>
import {getInfoData,addCart} from "../api/index.js";
import { Toast } from "vant";
export default {
  name: 'Info',
  data(){
	  return{
		  infoData:[],
		  flag:true
	  }
  },
  created(){
	  this.getData();
	   this.$store.dispatch("asyncgetCartList");//进入页面就先发送一次请求，获取加入购物车的数据
  },
  methods:{
	  getData(){
		 getInfoData(this.$route.params.gId).then(data=>{
			 if(data.resultCode==200){
				 this.infoData=data.data;
			 }
			 //console.log(this.infoData);
		 }) 
	  },
	  backfn(){
		  this.$router.push("/home");
	  },
	  onClickButton() {
		  if(!this.flag){return}
		  this.flag=false;
		  addCart({goodsId:this.$route?.params?.gId,goodsCount:1}).then(data=>{
			  if(data.resultCode==200){
			  	  Toast.success('添加成功');
				  //获取购物车的，添加的具体内容的数据
				  this.$store.dispatch("asyncgetCartList")
			  }else{
				  Toast.fail('已经添加');
			  }
			  this.flag=true;
		  })
	     
	  }
  },
  computed:{
	  goodsCount(){
		  return this.$store.getters.goodsCount;
	  }
  }
}
</script>

<style lang="less" scoped>
	.info{
		.bigimg{
			width:100%;
		}
		h4,p{
			margin-left:15px;
		}
		/deep/.content img{
			width:100%;
		}
	}
</style>
